import { Card, Select, Input, Button, Space, message } from 'antd'
// import { PageHeader } from '@ant-design/pro-layout'
import { useRef, useState } from 'react'
import { PlusSquareOutlined } from '@ant-design/icons'
import './index.less'
import TypeTree from '@/pages/components/type-tree/index.jsx'
import FlowStepList from '../components/flow-step-list.jsx'
import { autoCheckConfig } from '@/utils/constant.js'

export const FlowStep = () => {
  const typeTreeRef = useRef()

  const [currentType, setCurrentType] = useState({})

  const onSelect = (type) => {
    setCurrentType(type)
  }

  const extra = (
    <PlusSquareOutlined
      title="新增顶级分类"
      onClick={() => typeTreeRef.current.addTopLevel()}
    />
  )

  const listRef = useRef()

  const stepExtra = <Button size='small' type="primary" onClick={() => listRef.current.addFlowStep()}>新增</Button>

  return (
    <div className="ant-page-header page-header flow-step-page">
      <div className="ant-page-header-content">
        <div className="layout-left">
          <Card
            size="small"
            title="自动判读分类"
            className="page-card"
            extra={extra}
          >
            <TypeTree ref={typeTreeRef} typeCode="4" onSelect={onSelect} />
          </Card>
        </div>
        <div className="layout-right">
          <Card
            size="small"
            title={currentType && currentType.id ? `【${currentType.name || '' }】自动判断配置` : '自动判断配置' }
            className="page-card"
            extra={stepExtra}
          >
            <FlowStepList
              ref={listRef}
              config={autoCheckConfig}
              type={currentType}
            />
          </Card>
        </div>
      </div>
    </div>
  )

  // return <PageHeader title="流程步配置" className='page-header flow-step-page'>
  //   <div className='layout-left'>
  //     <Card size='small' title="流程步分类" className='page-card' extra={extra}>
  //       <TypeTree ref={typeTreeRef} typeCode='2' onSelect={onSelect}/>
  //     </Card>
  //   </div>
  //   <div className='layout-content'>
  //     <ConfigList config={ flowStepConfig } type={currentType} tableCom={FlowStepTable}/>
  //   </div>
  // </PageHeader>
}

export default FlowStep
